import React, { useEffect, useState,useRef } from 'react'
import { Table, Space,Button,Modal,Input,Form } from 'antd';

export default function MyTable(props) {

  const [pagination,setPagination]=useState({current:1,pageSize:8})
  const [visible,setVisible]=useState(false)
  const [tableItem,setTableItem]=useState({})
  const [submit,setSubmit]=useState(null)
  const { list,actionInfo,setActionInfo,loading }=props

  const rename_input = useRef()

  const changeCategory=(text, record, index)=>{
    let res={name:record.name}
    if(actionInfo.length===0){
      res.id=record.id
    }else if(actionInfo.length===1){
      res.id=record.id
      res.parent_index=index+(pagination.current-1)*pagination.pageSize
    }else{
      res.id=record.id
      res.parent_index=actionInfo[1].index
      res.child_index=index+(pagination.current-1)*pagination.pageSize
    }
    setSubmit(res)
    setVisible(true)
  }
  const addCategoryChildren=(text, record, index)=>{
    console.log('添加子分类')
    console.log(text, record, index)
  }
  const checkCategoryChildren=(text, record, index)=>{
    console.log('查看子分类')
    console.log(text, record, index)
    setActionInfo(()=>[...actionInfo,{name:record.name,index:index+(pagination.current-1)*pagination.pageSize,pagination}])
    props.titleChange([...actionInfo,{name:record.name,index:index+(pagination.current-1)*pagination.pageSize,pagination}])
    console.log(actionInfo)
  }

  const onTableChange=(pagination)=>{
    setPagination(pagination)
  }

  const handleOk=()=>{
    let rename=rename_input.current.state.value
    console.log(rename)
    submit.rename=rename
    delete submit.name
    props.changeCategory(submit)
    setVisible(false)
  }

  useEffect(()=>{
    setPagination({current:1,pageSize:8})
  },[list])

  const columns = [
    {
      title: '分类名称',
      width:'80%',
      className:'table-column',
      dataIndex: 'name',
    },
    {
      title: '操作',
      width:'20%',
      key: 'id',
      render: (text, record, index) => (
        <Space size="middle">
          <Button type="link" onClick={()=>changeCategory(text, record, index)}>修改分类</Button>
          {
            record.children?<Button type="link" onClick={()=>checkCategoryChildren(text, record, index)}>查看子分类</Button>:
            actionInfo.length<=1?<Button type="link" onClick={()=>addCategoryChildren(text, record, index)}>添加子分类</Button>:null
          }
          
        </Space>
      ),
    },
  ];
  
  return (
    <div className='category-table'>
      <Table bordered columns={columns} dataSource={list} loading={loading} pagination={pagination} rowKey='id' onChange={onTableChange} onRow={record=>({onClick:()=>{console.log(record);setTableItem(record)}})}/>
      <Modal
        title="修改分类"
        visible={visible}
        onOk={handleOk}
        onCancel={()=>setVisible(false)}
      >
        <Form key={tableItem.id} initialValues={tableItem?{rename:tableItem.name}:{rename:''}}>
          <Form.Item name='rename' rules={[{required:true,message:'必填'},{type:'string'},{whitespace:true,message:'不能包含空格'}]}>
            <Input key={submit?.name} ref={rename_input} placeholder='请输入修改的类名'></Input>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )
}
